<template>
  <div class="hello">
    <div class="card">
      <h1>transition动画</h1>
      <div class="gradients">
        <p class="gradient"></p>
        <p class="gradient"></p>
        <p class="gradient"></p>
      </div>
      <div class="rotates">
        <p class="rotate"></p>
      </div>
      <div class="cursor-hover"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.card {
  padding: 20px 20px 40px;
  background-color: #fff;
  border: 1px solid #F0F0F0;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  text-align: left;
  position: relative;
  transition: all ease-in .5s;
  cursor: pointer;
  &:hover {
    box-shadow: 0px 3px 8px rgba(93,0,255,0.16);
  }
  h1 {
    color: #313D57;
    font-size: 30px;
    margin-bottom: 30px;
    font-weight: bold;
  }
  p {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    border-radius: 5px;
  }
  .gradients {
    height: 100%;
    &:hover {
      .gradient {
        width: 900px;
      }
    }
  }
  .gradient {
    background: linear-gradient(160deg,rgba(204,113,218,1) 0%,rgba(108,105,244,1) 100%);
    &:nth-of-type(1) {
      transition: all ease-in 2s;
    }
    &:nth-of-type(2) {
      transition: all ease-in-out 2s;
    }
    &:nth-of-type(3) {
      transition: all linear 2s;
    }
  }
  .rotates {
    height: 120px;
    position: relative;
  }
  .rotate {
    transition: all 3s linear;
    background: skyblue;
    position: absolute;
    top: 20px;
    animation: rotatename 3s 1s 2;
    animation-direction: alternate;
    animation-fill-mode: forwards;
  }
  @keyframes rotatename {
    from {
      background: skyblue;
      transform: rotate(0deg);
      left: 0px;
    }
    to {
      background: #303841;
      transform: rotate(360deg);
      left: 900px;
    }
  }
}
</style>
